<template>
  <div class="song-list">
    <list-title
      :count="count"
      :collect="collect"
      @play-all="playAll"/>

    <div class="song-list__main">
      <song-item v-for="(song, index) of tracks"
        :key="index"
        :order="index + 1"
        :song="song"
        alia-post
        v-on="$listeners"/>
    </div>
  </div>
</template>

<script>
import ListTitle from './components/ListTitle'
import SongItem from '@/components/SongItem'
import { mapGetters } from 'vuex'

export default {
  name: 'song-list-content',
  components: { ListTitle, SongItem },
  props: {
    count: { type: Number, default: 0 },
    collect: { type: Number, default: 0 },
    tracks: { type: Array, default: () => [] }
  },
  computed: {
    ...mapGetters(['playMode'])
  },
  methods: {
    playAll () {
      const index = this.playMode === 2
        ? Math.floor(Math.random() * this.tracks.length)
        : 0
      this.$emit('play-song', this.tracks[index])
      this.$emit('update-playlist')
    }
  }
}
</script>

<style lang="scss" scoped>
.song-list {
  position: relative;
  &__main {
    background-color: #fff;
  }
}
</style>
